<template>
	<view>
		<u-navbar back-text="返回" title="我的收藏" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }" back-icon-color="#108EE9">
		</u-navbar>
		<view class="content">
			<view class="job-item">
				<view class="job-title">
					<view class="headimg">
						<image src="../../../static/images/develop/headimg.png" mode=""></image>
						<view class="authod-img">
							<image src="../../../static/images/home/authicon.png" mode=""></image>
						</view>
					</view>
					<view class="job-name">
						成都市招木工
					</view>
				</view>
				<view class="job-info">
					<view class="info-item">
						<view class="info-type">
							薪资：
						</view>
						<view class="info-text">
							260/天
						</view>
					</view>
					<view class="info-item">
						<view class="info-type">
							结算方式：
						</view>
						<view class="info-text">
							日结
						</view>
					</view>
					<view class="info-item">
						<view class="info-type">
							<image src="../../../static/images/home/location.png" mode=""></image>
						</view>
						<view class="info-text">
							6.5公里
						</view>
					</view>
				</view>
				<view class="job-content">
					木工 20名（260元/天），工作职责：钉框架、制作柜子求从事木工相关工作经验，年龄50岁以下，有展从事木工相关工作经验从事木工相关工作经验
				</view>
				<view class="job-time">
					到岗时间：<text>6月22日 16:30</text>
				</view>
				<view class="job-right-box">
					招5人/剩2人
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
		},
		onReady() {
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
		.job-item {
			margin-top: 30rpx;
			width: 100%;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 8rpx 20rpx rgba(0, 0, 0, 0.1);
			opacity: 1;
			border-radius: 20rpx;
			position: relative;
			padding: 30rpx 30rpx;
		
			.job-title {
				display: flex;
		
				.headimg {
					width: 75rpx;
					height: 75rpx;
					position: relative;
		
					image {
						width: 75rpx;
						height: 75rpx;
					}
		
					.authod-img {
						position: absolute;
						bottom: -6rpx;
						right: -8rpx;
		
						image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}
		
				.job-name {
					margin-left: 20rpx;
					line-height: 75rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					opacity: 1;
				}
			}
		
			.job-info {
				margin-top: 28rpx;
				display: flex;
				justify-content: space-between;
		
				.info-item {
					display: flex;
		
					.info-type {
						font-size: 22rpx;
						font-weight: bold;
						line-height: 30rpx;
						color: rgba(153, 153, 153, 1);
						opacity: 1;
		
						image {
							width: 24rpx;
							height: 30rpx;
						}
					}
		
					.info-text {
						margin-left: 8rpx;
						font-size: 26rpx;
						font-weight: bold;
						line-height: 30rpx;
						color: rgba(51, 51, 51, 1);
						opacity: 1;
					}
				}
			}
		
			.job-content {
				margin-top: 24rpx;
				width: 100%;
				font-size: 24rpx;
				font-weight: 400;
				line-height: 32rpx;
				color: rgba(51, 51, 51, 1);
				opacity: 1;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		
			.job-time {
				margin-top: 10rpx;
				font-size: 22rpx;
				font-weight: bold;
				line-height: 30rpx;
				color: rgba(153, 153, 153, 1);
				opacity: 1;
		
				text {
					display: inline-block;
					margin-left: 20rpx;
					font-size: 26rpx;
					font-weight: bold;
					line-height: 35rpx;
					color: rgba(51, 51, 51, 1);
					opacity: 1;
				}
			}
		
			.job-right-box {
				position: absolute;
				right: 0;
				top: 0;
				background: linear-gradient(357deg, rgba(211, 176, 105, 1) 0%, rgba(228, 205, 112, 1) 100%);
				opacity: 1;
				border-radius: 0px 20rpx 0px 40rpx;
				padding: 14rpx 24rpx;
				font-size: 24rpx;
				font-weight: 500;
				line-height: 32rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>
